<template>
	<view class="gradens-yhrw-kgtx">
		<view class="gradens-yhrw-view-card">
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name">任务名称:</view>
				<text class="yhrw-view-list-text">{{examineReport.taskName}}</text>
			</view>
			<view class="yhrw-view-list-item">
				<view class="yhrw-view-list-name" style="width: auto;">任务开始时间:</view>
				<text class="yhrw-view-list-text"
					style="margin-left: 10rpx;">{{examineReport.taskStartTime | date('yyyy年mm月dd日')}}</text>
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="yhrw-view-list-item">
					<view>上报完成进度:</view>
					<text style="margin-left: 10rpx;" class="yhrw-view-list-text">{{examineReport.schedule}}%</text>
				</view>
				<view class="yhrw-view-list-item">
					<view>当前操作人:</view>
					<text class="yhrw-view-list-text">{{name}}</text>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="yhrw-view-list-item">
					<view>考评对象:</view>
					<text style="margin-left: 10rpx;" class="yhrw-view-list-text">{{examineReport.objName}}</text>
				</view>
				<view class="yhrw-view-list-item">
					<view>考评监督小组:</view>
					<text class="yhrw-view-list-text">{{examineReport.groupName}}</text>
				</view>
			</view>
			<view class="" style="border-bottom: 1px solid #c5c5c5;margin-top: 20rpx;"></view>
			<view class="">
				<view class="yhrw-view-list-item">
					<view class="yhrw-view-list-name">考核大类</view>
					<text class="yhrw-view-list-text">{{examineReport.firstLevelName}}</text>
				</view>
				<view class="yhrw-view-list-item">
					<view style="margin-right: 10rpx;">考核小类:</view>
					<text class="yhrw-view-list-text">{{examineReport.twoLevelName}}</text>
				</view>
				<view class="yhrw-view-list-item">
					<view style="margin-right: 10rpx;">考核内容:</view>
					<text class="yhrw-view-list-text">{{examineReport.threeLevelName}}</text>
				</view>
			</view>
			<view class="" style="margin-top: 20rpx;">
				<uni-forms ref="form" :label-width="75" :modelValue="formData" :rules="rules">
					<uni-forms-item label="扣分:" name="buckleScore">
						<uni-easyinput type="number" v-model="formData.buckleScore" placeholder="请输入扣分" />
					</uni-forms-item>
					<uni-forms-item label="考核备注:" name="examineRemark">
						<uni-easyinput type="text" v-model="formData.examineRemark" placeholder="请输入考核备注" />
					</uni-forms-item>
					<uni-forms-item label="位置说明:" name="address">
						<uni-easyinput suffixIcon="location-filled" type="text" v-model="address" placeholder="点击选择具体位置"
							@iconClick="posClick"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="" style="display: flex;position: absolute;width: 100%;bottom: 20rpx;">
				<button type="primary" style="width: 200rpx;" @click="goImage">图片上传</button>
				<button type="primary" style="width: 200rpx;" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listExamineReport,
		getExamineReport,
		delExamineReport,
		addExamineReport,
		updateExamineReport,
	} from "@/api/comp/examineReport";
	import {
		getExamineFeedback,
		updateExamineFeedback,
	} from "@/api/comp/examineFeedback";
	import {
		baseUrl
	} from "@/config.js";
	import {
		getToken
	} from '@/utils/auth'
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState({
				name: (state) => state.user.name,
				userInfo: (state) => state.user.userInfo,
			}),
		},
		data() {
			return {
				date: new Date(),
				// showCalendar: false,

				formData: {
					buckleScore: '',
					examineRemark: '',
					location: '',
					address:''
				},
				form: {},
				rules: {
					buckleScore: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
					examineRemark: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
					// 对name字段进行必填验证
					khbz: {
						rules: [{
								required: true,
								errorMessage: '不能为空',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				},
				examineReport: {},
				options: {},
				location:null,
				address:''
			}
		},
		onLoad(options) {
			this.options = options
			this.getInfo(options)
			console.log(options)
		},
		methods: {
			getInfo(options) {
				this.$store.commit('SET_KH_IMAGE_LIST', [])
				console.log(this.$store.state.yhrw.khImglist)
				getExamineReport(options.id).then(res => {
					if (res.data) {
						this.examineReport = res.data
						this.$set(this.examineReport, 'groupName', options.groupName)
						this.$set(this.examineReport, 'objName', options.objName)
						this.$set(this.examineReport, 'objName2', options.objName2)
						this.$set(this.examineReport, 'firstLevelName', options.firstLevelName)
						this.$set(this.examineReport, 'threeLevelName', options.threeLevelName)
						this.$set(this.examineReport, 'twoLevelName', options.twoLevelName)
					}
				})
				getExamineFeedback(options.rowId).then(res => {
					if (res.data) {
						this.$set(this.formData, 'buckleScore', res.data.buckleScore)
						this.$set(this.formData, 'examineRemark', res.data.examineRemark)
						this.formData = res.data
						this.address = res.data.address || ''
					}
				})
			},
			posClick(){
				let _this = this;
				let formLocation = {}
				if(this.formData.location){
					formLocation = JSON.parse(this.formData.location)
				}
				//跳转位置选择页面
				uni.navigateTo({
					url:`../../common/webview/index?location=${JSON.stringify({lat:formLocation.lat || '',lon:formLocation.lon || ''})}&url=`+encodeURI("pages/position"),
					events:{
						//监听选点事件，得到坐标 详细地址
						acceptDataFromOpenedPage:function(data){
							console.log(data.coordinate.lat)
							let res = data
							let location = {lat:data.coordinate.lat,lon:data.coordinate.lon,}
							_this.formData.address = data.coordinate.address;
							_this.address = data.coordinate.address;
							_this.location = JSON.stringify(location);
						}
					}
				})
			},
			goImage() {
				uni.navigateTo({
					url: `/pages/gardens/khdj/image?id=${this.formData.remark}`
				})
			},
			backClick() {
				uni.navigateBack()
			},
			uploadfn(tempFilePaths) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + '/file', //仅为示例，非真实的接口地址
						filePath: tempFilePaths,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + getToken()
						},
						success: (uploadFileRes) => {
							resolve(uploadFileRes.data)
						},

						fail: function(err) {
							reject(err)
						}
					});
				})
			},
			submit() {
				this.$refs.form.validate().then(res => {
					this.formData.location = this.location
					let imglist = this.$store.state.yhrw.khImglist
					let arr = imglist.map(file => {
						return this.uploadfn(file)
					})
					Promise.all(arr).then(res2 => {
						if (res2.length > 0) {
							res.remark = res2.map(item => {
								item = JSON.parse(item)
								return item.fileid
							})
						}
						if (imglist.length > 0) {
							res.remark = res.remark ? res.remark.join(",") : null
						} else {
							res.remark = 'null'
						}
						if (
							parseInt(res.buckleScore) >
							parseInt(this.options.threeLevelScore)
						) {
							this.$u.toast("扣分项不能大于指标分值");
							return;
						}
						updateExamineFeedback(Object.assign(this.formData, res)).then(_ => {
							this.$store.commit('SET_KH_IMAGE_LIST', [])
							console.log(this.$store.state.yhrw.khImglist)
							this.$u.toast('提交成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						})
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.gradens-yhrw-view-card {
		box-sizing: border-box;
		padding: 10rpx 10px;
	}

	.gradens-yhrw-kgtx {
		.yhrw-view-list-item {
			display: flex;
			padding-top: 20rpx;
			align-items: center;

			.yhrw-view-list-name {
				width: 125rpx;
			}

			.yhrw-view-list-text {
				flex: 1;
			}
		}
	}
</style>